<template>
  <el-dialog
    title="人员管理"
    :visible.sync="peopleDialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    class="dialog_"
  >
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="elForm">
      <el-form-item label="部门：" prop="department">
        <el-select
          v-model="ruleForm.department"
          allow-create
          placeholder="请选择部门"
          size="small"
          @change="change"
        >
          <el-option
            v-for="item in treeData"
            :key="item.id"
            :label="item.departmentName"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <i @click="addDep" class="el-icon-plus addbtn_"></i>
        <i @click="delDep" class="el-icon-minus minus_" v-if="treeData && treeData.length > 0"></i>
      </el-form-item>

      <el-form-item label="选择员工：" prop="peopleName">
        <el-select
          v-model="ruleForm.peopleName"
          multiple
          allow-create
          placeholder="请选择员工"
          size="small"
        >
          <el-option
            v-for="item in roleOptions"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="save-btn" type="primary" @click="submitForm('ruleForm')"
        >确认</el-button
      >

      <el-button @click="resetForm('ruleForm')" class="resletBtn">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "PeoplesDialog",
  components: {},
  props: ["peopleDialogVisible", "treeData", "roleOptions"],
  data() {
    return {
      selectData: {},
      ruleForm: {
        peopleName: [],
        department: "",
      },
      options: [],
      selectDep: "请选择",
      rules: {
        peopleName: { required: true, message: "请输入人员", trigger: "blur" },
        department: [
          { required: true, message: "请选择部门", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    setSelectPeople(ids) {
      this.ruleForm.peopleName = ids;
    },
    change(val) {
      console.log(val);
      this.$emit("depChange", val);
    },
    addDep() {
      this.$emit("addDep");
    },
    delDep() {
      this.$emit("delDep");
    },
    queryNodeById(node, nodeId, temp = {}) {
      let forFn = (arr, id) => {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].id === id) {
            temp = arr[i]; // 匹配到的节点 或者 父节点
            break;
          } else {
            if (
              arr[i].childDepartmentList &&
              arr[i].childDepartmentList.length != 0
            ) {
              forFn(arr[i].childDepartmentList, id);
            }
          }
        }
      };
      forFn(node, nodeId);
      return temp;
    },
    handleNodeClick(data) {
      this.selectData = data;
      console.log(data);
      this.$refs.selectRef.blur();
      this.ruleForm.father = data.name;

      console.log(
        "result",
        this.queryNodeById(this.treeData, this.selectData._id)
      );
    },
    handleClose() {
      this.$refs["ruleForm"].resetFields();
      this.$emit("close", 1);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("close", 2, this.ruleForm);
          console.log(this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$emit("close", 1);
    },
    clearForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.dialog_ {
  .el-dialog {
    width: 700px;
    .el-dialog__body {
      padding: 30px 102px 10px 108px;
      box-sizing: border-box;
      position: relative;
      .elForm {
        width: 100%;
        .jsForm {
          position: relative;
        }
        .minus_ {
          position: absolute;
          right: -60px;
          top: 1px;
          font-size: 20px;
          cursor: pointer;
          color: #f40;
        }
        .addbtn_ {
          position: absolute;
          right: -31px;
          top: 1px;
          font-size: 20px;
          cursor: pointer;
          color: #2348e8;
        }
        .top20 {
          margin-top: 32px;
        }
        .el-form-item {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 20px !important;
          .el-form-item__label {
            width: 84px;
            text-align: left;
          }
          .el-form-item__content {
            flex: 1;
            .el-select.el-select--small {
              width: 100%;
            }
          }
        }
        // 单-角色配置
        .qxForm {
          margin-bottom: 10px !important;
          .el-form-item__label {
            padding-left: 8px;
            box-sizing: border-box;
          }
        }
        // 修改账号
        .lines_ {
          width: 98%;
          height: 1px;
          border: 1px solid #eeeeee;
          margin-bottom: 20px;
          position: absolute;
          left: 0;
          margin-left: 1%;
        }
        .tree-box {
          width: 100%;
          padding-left: 83px;
          box-sizing: border-box;
          .tree {
            border: 1px solid rgba(0, 0, 0, 0.15);
            padding: 10px;
            box-sizing: border-box;
            height: 200px;
            .el-form-item__content {
              height: 100%;
              overflow-y: scroll;
            }
          }
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
}
</style>
